<template>
	<view>
		<view class="" v-if="isRender">
			<view class="progress">{{info.status_text}}</view>
			<view class="section">
				<view class="receive-info">
					<u-icon class="icon" size="40" name="map-fill"></u-icon>
					<view class="info">
						<text class="title">{{info.receive_name}} {{info.receive_mobile}}</text>
						<view class="address">{{info.receive_address}}</view>
					</view>
				</view>
				<view class="good-info" @click="navTo('/pages/scoreshop/good/show',{id:info.good_id})">
					<u-image width="200rpx" height="160rpx" mode="aspectFill" :src="info.good_image"></u-image>
					<view class="info">
						<view class="title">{{info.good_title}}</view>
						<view class="bottom">
							<view class="score">{{info.good_score}}积分</view>
							<view class="number">×{{info.number}}</view>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="cell__tit">合计：</view>
					<view class="cell__val">{{info.score}}积分</view>
				</view>
				<view class="cell">
					<view class="cell__tit">兑换时间：</view>
					<view class="cell__val">{{info.createtime_text}}</view>
				</view>
				<view class="cell">
					<view class="cell__tit">订单号：</view>
					<view class="cell__val">{{info.order_sn}}</view>
				</view>
				<view class="cell">
					<view class="cell__tit">门店地址：</view>
					<view class="cell__val" @click="dh" style="color: #2196F3;">{{info.shopnames.shop_name}}</view>
				</view>
				<view class="cell">
					<view class="cell__tit">联系电话：</view>
					<view class="cell__val" @click="tels" style="color: #2196F3;">{{info.shopnames.shop_tel}}</view>
				</view>
				<block v-if="info.note">
					<view class="cell">
						<view class="cell__tit">发货信息：</view>
					</view>
					<view class="reply"><u-parse :html="info.note"></u-parse></view>
				</block>
			</view>
			<view class="u-padding-50 anniu"  @click="wxqrcode" v-if="info.status_text != '已核销'">
				核销码
			</view>
			<view class="u-padding-50 anniu2" v-else>
				订单已核销
			</view>
		</view>
		<view class="ewm_box" v-if="show_ewm" @click="show_ewm = !show_ewm">
			<image :src="wx_qrcode_url" mode="" style="width: 400rpx;height: 400rpx;"></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: null,
				isRender: false,
				id: '',
				wx_qrcode_url: '',
				show_ewm: false,
			}
		},
		onLoad(options) {
			let that = this;
			that.id = options.id
			this.$u.api.getScoreshopOrderDetail({
				id: options.id
			}).then(res => {
				that.info = res.data;
				that.isRender = true;
			});
		},
		methods: {
			tels() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.info.shopnames.shop_tel,
					success: () => {
						console.log('拨打电话成功！');
					},
					fail: () => {
						console.error('拨打电话失败！');
					}
				});

			},
			dh() {

				uni.openLocation({
					latitude: Number(this.info.shopnames.lat), //要去的纬度
					longitude: Number(this.info.shopnames.lon), //要去的经度 
					address: this.info.shopnames.shop_address, //要去的具体地址 
				})

			},
			wxqrcode() {
				let that = this
				console.log('调用了啊')
				let data = {
					page: 'pages/index/index',
					scene: that.id
				};
				if (that.wx_qrcode_url == '') {
					this.$u.api.wx_qrcode(data).then(res => {
						this.show_ewm = true
						this.wx_qrcode_url = res.data
						console.log(res)
					});
				} else {
					this.show_ewm = true
				}


			},
			previewImage: function(i) {
				uni.previewImage({
					urls: [this.info.good_image],
					current: i
				});
			},
			openLocation: function() {
				console.log('打开地图');
				uni.openLocation({
					latitude: parseFloat(this.info.lat),
					longitude: parseFloat(this.info.lng),
					name: this.info.labels,
					address: this.info.address,
					success: function() {
						console.log('openLocation success');
					},
					fail: function(error) {
						uni.showToast({
							title: error,
							duration: 2000

						});
					}
				});
			}

		},

	}
</script>

<style>
	page {

		background-color: #f4f4f4;
		padding-bottom: 30rpx;
	}

	.anniu {
		text-align: center;
		background: #53a240;
		width: 90%;
		margin: 0px atuo;
		margin-left: 5% !important;;
		height: 88rpx;
		padding: 0px !important;
		margin-top: 50rpx !important;;
		border-radius: 20rpx;
		line-height: 88rpx;
		color: #fff;

	}

	.anniu2 {
		text-align: center;
		background: #828282;
		width: 90%;
		margin: 0px atuo;
		margin-left: 5% !important;;
		height: 88rpx;
		padding: 0px !important;
		margin-top: 50rpx !important;;
		border-radius: 20rpx;
		line-height: 88rpx;
		color: #fff;

	}

	.progress {
		background-color: #2196F3;
		padding: 50rpx 50rpx 150rpx 50rpx;
		font-size: 48rpx;
		color: #ffffff;
	}

	.section {
		margin: 0 auto;
		width: calc(100% - 100rpx);
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-top: -100rpx;
	}

	.receive-info {
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx dashed #eeeeee;

	}

	.receive-info .icon {
		margin-right: 30rpx;
	}

	.receive-info .info .title {
		font-size: 32rpx;
		font-weight: bold;

	}

	.receive-info .info .address {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx
	}

	.images {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx;
	}

	.images .u-image {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.images .u-image:nth-child(3n) {
		margin-right: 0;
	}

	.content {
		padding: 0 30rpx 30rpx 30rpx;
	}

	.cell {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.cell .cell__tit {
		color: #777777;

	}

	.cell .cell__val {
		color: #444444;
	}

	.reply {
		padding: 20rpx 30rpx;
	}


	.good-info {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
		padding: 30rpx;
	}

	.good-info .u-image {
		flex-shrink: 0;
		border-radius: 20rpx !important;
		overflow: hidden !important;
	}

	.good-info .info {
		padding-left: 20rpx;

	}

	.good-info .info .title {
		font-size: 32rpx;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;

	}

	.good-info .info .bottom {
		margin-top: 20rpx;
		color: #2196F3;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.good-info .info .bottom .number {
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.good-info .info .bottom .score {
		font-weight: bold;
		font-size: 32rpx;
		color: #2196F3;
		display: flex;
		align-items: center;
	}

	.ewm_box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
	}
</style>